<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUser } from "@/stores/user";
import type { Ueser } from "@/stores/user";

const placeholder = '请输入你的昵称!';

const router = useRouter();
const state = useUser();
const name = ref('');

window.socket.on('register', (newUser: Ueser) => {
    console.log("非首次注册，相当于登录");
  // 非首次注册，相当于登录

  if (!newUser.first) {
    router.push('/chat');
    return
  }

  // 注册成功
  console.log("注册成功：", newUser);
  state.user = newUser;
  router.push('/chat');
})

const comfirmAction = () => {
  if (name.value) {
      console.log("我在注册"+name.value);
      window.socket.emit('register', name.value);
  } else {
    //@ts-ignore
    ElMessage({
      showClose: true,
      message: placeholder,
      type: 'error',
    })
  }
}
</script>

<template>
  <div class="register">
    <main class="main">
      <h1 class="gradient-text">一起聊天</h1>
      <el-input v-model="name" :placeholder="placeholder" clearable style="width: 200px;height: 50px"/>
      <el-button type="primary" @click="comfirmAction">确认</el-button>
    </main>
  </div>
</template>

<style lang="scss" scoped>
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 5vw;
  height: 100%;
  width: 100%;
  background-image: url(https://img1.baidu.com/it/u=2052683582,2603151390&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;

  .gradient-text {
    font-weight: bold;
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .main {
    width: 80vw;
    height: 30vh;
    padding: 10px;
    background-color: rgba($color: #fed6e3, $alpha: 0.2);
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;

    &:hover {
      transition: .5s;
      background-color: rgba($color: #a8edea, $alpha: 0.1);
    }

    .el-button--primary {
      margin-top: 20px;
      margin-left: 10px;
    }
  }
}
</style>
